<template>
  我是子组件{{msg}}
  <button @click="updata">数据更新</button>
</template>

<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
export default {
  name: 'child',
  beforeCreate () { console.log('vue2.0的beforeCreate方法触发') },
  created () { console.log('vue2.0的create方法触发') },
  beforeMount () { console.log('vue2.0的beforeMount方法触发') },
  mounted () { console.log('vue2.0的mounted方法触发') },
  beforeUpdate () { console.log('vue2.0的beforeUpdate方法触发') },
  updated () { console.log('vue2.0的updated方法触发') },
  beforeUnmount () { console.log('vue2.0的beforeUnmount方法触发') },
  unmounted () { console.log('vue2.0的unmounted方法触发') },
  setup () {
    onBeforeMount(() => {
      console.log('vue3.0的onBeforeMount');
    })
    onMounted(() => {
      console.log('vue3.0的onMounted');
    })
    onBeforeUpdate(() => {
      console.log('vue3.0的onBeforeUpdate');
    })
    onUpdated(() => {
      console.log('vue3.0的onUpdated');
    })
    onBeforeUnmount(() => {
      console.log('vue3.0的onBeforeUnmount');
    })
    onUnmounted(() => {
      console.log('vue3.0的onUnmounted');
    })
    const msg = ref(1)
    function updata () {
      msg.value++
    }
    return {
      msg, updata
    }
  },
}
</script>

<style>
</style>